<template>
	<view class="myPages" :style="{paddingTop: `${search.top+search.height+10}px`}">
		<myHeard :search="search" :title="title" @goPath="goBack"></myHeard>

		<view class="myPages__main">
			<!-- 快递区 -->
			<view class="myPages__logistics" @click.stop="goPath('/package/profile/index?goPlus=true')">
				<image class="myPages__logisticsImg" src="/static/images/logistics.png"></image>
				<view class="myPages__logisticsMain">
					<p class="myPages__logisticsMainTop" v-if="particulars.orderAddress">
						{{particulars.orderAddress.province}}{{particulars.orderAddress.city}}{{particulars.orderAddress.region}}{{particulars.orderAddress.detail}}
					</p>
					<p class="myPages__logisticsMainTop" v-if="!particulars.orderAddress">
						点击添加收货地址</p>
					<view class="myPages__logisticsMainBottom">
						<span>{{particulars.orderAddress.name}}</span>
						<span>{{particulars.orderAddress.phone}}</span>
					</view>
				</view>
				<image class="myPages__logisticsMainEnd" src="/static/images/rightSignss.png"></image>
			</view>
			<!-- 订单区 -->
			<view class="myPages__mainForm">
				<view class="myPages__mainFormHaerd">
					<view class="myPages__mainFormHaerdLeft">
						<image class="myPages__mainFormHaerdLeftImg" src="/static/images/titleLogo.png"></image>
						<span>| 新潮手表新鲜式</span>
					</view>
					<image @click="serviceShow = true" class="myPages__mainFormHaerdRightImg"
						src="/static/images/headset.png"></image>
				</view>
				<view class="myPages__mainFormMain">
					<view v-for="(item,index) in particulars.orderProductList" :key="index">
						<view v-if="item.productType==10" class="myPages__mainFormMainItem">
							<view class="myPages__mainFormMainItemName">{{item.productName}}</view>
							<view class="myPages__mainFormMainItemBody">
								<view class="myPages__mainFormMainItemBodyTop">
									<view @click.stop="ff_previewImage(item.productImg)"
										class="myPages__mainFormMainItemBodyTopImgBox">
										<image
											class="myPages__mainFormMainItemBodyTopImgs mymyPages__mainFormMainItemBodyTopImgs"
											:src="item.productImg"></image>
									</view>
									<view class="myPages__mainFormMainItemBodyBottomx">
										<p>{{item.productSku}}</p>
										<span>¥{{item.price}}</span>
									</view>
								</view>
								<view class="myPages__mainFormMainItemBodyBottom">
									<view class="myPages__mainFormMainItemBodyBottomImgBox">
										<view @click.stop="ff_previewImages(item.orderGoodsList,nowIndex)"
											v-for="(nowItem,nowIndex) in item.orderGoodsList" :key="nowIndex"
											class="myPages__mainFormMainItemBodyTopImgBoxs">
											<image class="myPages__mainFormMainItemBodyTopImg" :src="nowItem.coverImg">
											</image>
										</view>

									</view>
									<!-- <view class="myHandbag__mainItemCenBoxJjieMain">
											<image class="myHandbag__mainItemCenBoxJjieMainImg01"
											@click.stop="mallCartWxNum(item.cartId,item.goodsNum,'jdd',index)"
												src="/static/images/jianIcon.png">
											</image>
											<input @click.stop="" @blur="mallCartWxNum(item.cartId,item.goodsNum,'num',index)"
												class="nowinput" :value="item.productNum"></input>
											<image class="myHandbag__mainItemCenBoxJjieMainImg02"
											@click.stop="mallCartWxNum(item.cartId,item.goodsNum,'add',index)"
												src="/static/images/addIcon.png">
											</image>
										</view> -->
									<view class="myHandbag__mainItemCenBoxJjieMains">
										<view class="myHandbag__mainItemCenBoxJjieMainNum">
											x<span>{{item.productNum}}</span>件</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view v-if="partOrderProductList.length">
						<view class="myPages__mainFormMainItem">
							<view class="myPages__mainFormMainItemName">手表配件</view>
							<view class="myPages__mainFormMainItemBody">
								<view class="myPages__mainFormMainItemBodyTop myPages__mymainFormMainItemBodyTop"
									v-for="(item,index) in partOrderProductList" :key="index">
									<view @click.stop="ff_previewImage(item.productImg)"
										class="myPages__mainFormMainItemBodyTopImgBox">
										<image
											class="myPages__mainFormMainItemBodyTopImgs myPages__mymainFormMainItemBodyTopImgs"
											:src="item.productImg"></image>
									</view>
									<view class="myPages__mainFormMainItemBodyBottomx">
										<p>{{item.productSku}}</p>
										<span>¥{{item.price}}</span>
									</view>
									<view class="myHandbag__mainItemCenBoxJjieMainNuxsm">
										x<span>{{item.productNum}}</span></view>
								</view>

							</view>
						</view>
					</view>
					<view class="myPages__mainFormMainButtom">
						<view class="myPages__mainFormMainButtomText">共{{particulars.totalNum}}件，合计应付:</view>
						<view class="myPages__mainFormMainButtomBox">
							<span>￥</span>
							<span>{{particulars.totalPrice}}</span>
						</view>
					</view>
				</view>

			</view>
			<!-- 备注 -->
			<view class="myPages__remarkBox" @click="isRemark = true">
				<view class="myPages__remarkLeft">
					<image class="myPages__remarkLeftIcon" src="/static/images/remarkIcon.png"></image>
					<span>备注信息</span>
				</view>
				<view class="myPages__remarkRight">
					<span>{{textareaValue ? textareaValue : '添加备注'}}</span>
					<image class="myPages__remarkRightIcon" src="/static/images/rightSign.png"></image>
				</view>
			</view>
			<!-- 备注成功 -->
			<u-overlay :opacity="0.01" :show="isRemarkShowDui">
				<view @click.stop="" class="overlayBox">
					<image src="/static/images/duiIcon.png"></image>
					<span>备注成功</span>
				</view>
			</u-overlay>



			<!-- 支付区 -->
			<view class="myPages__paymentBox">
				<view class="myPages__paymentBoxItem" @click.stop="tagerPaymentIndex(index)"
					v-for="(item,index) in paymentList" :key="index">
					<view class="myPages__paymentLeft">
						<image class="myPages__paymentLeftIcon" :src="item.path"></image>
						<view class="myPages__paymentLeftText">
							<span>{{item.name}}</span>
							<span v-if="user.walletMoney && index==1">:剩余¥{{user.walletMoney}}</span>
						</view>
					</view>
					<image class="myPages__paymentLRight"
						:src="paymentIndex==index ? '/static/images/catIcon_active.png' : '/static/images/catIcon.png'">
					</image>
				</view>
			</view>
			<view class="myPages__remarkButtom">
				<view class="myPages__remarkBoxs" @click.stop="sendRemark">
					￥{{particulars.totalPrice}} | 立即支付
				</view>
			</view>
		</view>
		<!-- 联系客服 -->
		<u-overlay :show="serviceShow" @click="serviceShow = false">
			<view class="saleBox" @click.stop="">
				<view class="saleBox__Heard">联系客服</view>
				<image @click.stop="serviceShow = false" class="saleBox__HeardImg" src="/static/images/chachaIcon.png">
				</image>
				<view class="saleBox__Main">
					<view class="saleBox__MainItem saleBox__MainItem--service"
						@click.stop="callSeller(particulars.serverPhone)">
						<span
							class="serviceIphone">客服电话：{{particulars.serverPhone ? particulars.serverPhone : '暂无客服'}}</span>
						<image class="serviceIphoneImg" src="/static/images/serviceIcons.png"></image>
					</view>
				</view>
			</view>
		</u-overlay>

		<!-- 备注信息 -->
		<u-overlay :show="isRemark" @click="isRemark = false">
			<view @click.stop="" class="saleBox">
				<view class="saleBox__Heard">备注信息</view>
				<image @click.stop="ffsaleBox__HeardImg" class="saleBox__HeardImg" src="/static/images/chachaIcon.png">
				</image>
				<view class="saleBox__Main">
					<textarea :maxlength="50" :focus="false" :show-confirm-bar="false" @click.stop=""
						class="saleBox__MainText" v-model="textareaValue" placeholder="输入备注内容">

					</textarea>
					<view class="saleBox__MainTextarea">
						<span>{{textareaValue.length}}</span>
						<span>/50</span>
					</view>
					<view @click.stop="ff_isRemark"
						:class="textareaValue.length == 0 ? 'saleBox__MainItem saleBox__MainItem--wthid' : 'saleBox__MainItem saleBox__MainItem--red'">
						确定备注</view>
				</view>
			</view>
		</u-overlay>




	</view>
</template>

<script>
	import myHeard from '@/components/myHeard/index.vue'
	export default {
		components: {
			myHeard
		},
		data() {
			return {
				title: '确认订单',
				serviceShow: false,
				paymentIndex: 0,
				textareaValue: '',
				isRemark: false,
				isRemarkShowDui: false,
				particulars: null,
				partOrderProductList: [],
				addressId: '',
				buyType: '',
				paymentList: [{
						path: '/static/images/zfIcon.png',
						name: '微信支付',
						num: null
					},
					{
						path: '/static/images/yeIcon.png',
						name: '余额支付',
						num: 795.12
					}
				]
			}
		},
		onLoad(oprtion) {
			// #ifndef H5
			let search = uni.getMenuButtonBoundingClientRect()
			this.$store.commit('updataSearch', search);
			// #endif
			if (oprtion.sendObj) {
				console.log(oprtion.sendObj)
				this.sendObj = JSON.parse(oprtion.sendObj);
				this.buyType = this.sendObj.buyType;
				this.initAffirm();
			} else if (oprtion.backObj) {
				this.sendObj = JSON.parse(oprtion.backObj);
				this.buyType = this.sendObj.buyType;
				this.initAffirm();
			} else if (oprtion.bagObj) {
				this.sendObj = JSON.parse(oprtion.bagObj);
				this.buyType = this.sendObj.buyType;
				this.initAffirm();
			}
		},
		onShow(oprtion) {

			if (oprtion) {
				let nowparticulars = JSON.parse(JSON.stringify(this.particulars))
				nowparticulars.orderAddress = oprtion == '无' ? null : oprtion;

				this.particulars = JSON.parse(JSON.stringify(nowparticulars))
				console.log('this.particulars--->', this.particulars)

			}
		},
		computed: {
			search() {
				return this.$store.state.search;
			},
			user() {
				return this.$store.state.user;
			}

		},
		methods: {
			callSeller(phone) {
				if (!phone) {

					uni.showToast({
						icon: 'none',
						title: '暂无客服'
					});
					return
				}
				uni.makePhoneCall({
					phoneNumber: phone,
					// 成功回调
					success: (res) => {
						console.log('调用成功!')
					},
				});
				// this.serviceShow = false;
			},
			ff_previewImages(myImgs, index = 0) {
				let imgs = [];
				myImgs.forEach(item => {
					imgs.push(item.coverImg)
				})
				uni.previewImage({
					urls: imgs,
					current: index
				})
			},
			//调用预览图片的方法
			ff_previewImage(myImgs, index = 0) {
				uni.previewImage({
					urls: [myImgs],
					current: index
				})
			},
			ff_remark() {
				if (this.paymentIndex == 1 && this.particulars.totalPrice > this.user.walletMoney) {
					uni.showToast({
						icon: 'none',
						title: '余额不足',
						mask: true
					})
					return true;
				} else if (!this.addressId) {
					uni.showToast({
						icon: 'none',
						title: '收货地址不能为空',
						mask: true
					})
					return true;
				}
				return false;
			},
			ffsaleBox__HeardImg() {
				this.isRemark = false;
				this.textareaValue = "";
			},
			ff_isRemark() {
				if (this.textareaValue.length == 0) {
					uni.showToast({
						title: '请输入内容',
						icon: 'none'
					})
					return
				}
				this.isRemark = false;
				this.isRemarkShowDui = true;
				setTimeout(() => {
					this.isRemarkShowDui = false;
				}, 1000)
			},
			sendRemark() {
				if (this.particulars.orderAddress) {
					this.addressId = this.particulars.orderAddress.addressId ? this.particulars.orderAddress.addressId : 0;
				} else {
					this.addressId = 0
				}

				let goodsIds = [];
				let buyNum = '';
				if (this.buyType == 1) {
					this.particulars.orderProductList.forEach(onwItem => {
						onwItem.orderGoodsList.forEach(item => {
							goodsIds.push(item.goodsId);
						});
					});

					buyNum = 1;
				}
				let orderNo = ''
				if (this.buyType == 3) {
					orderNo = this.sendObj.orderNo
				}


				let buyerRemark = this.textareaValue;
				let productImg = this.sendObj.productImg ? this.sendObj.productImg : '';
				let payType = this.paymentIndex == 0 ? 20 : 30;

				let partnerNo = uni.getStorageSync('partnerNo')

				let req = {
					buyType: this.buyType,
					addressId: this.addressId,
					goodsIds,
					buyNum,
					buyerRemark,
					productImg,
					payType,
					partnerNo,
					orderNo,
					productType: this.sendObj && this.sendObj.productType ? this.sendObj.productType : ''
				}


				let isRemark = this.ff_remark();
				if (isRemark) return;


				let that = this;

				uni.showLoading({
					title: '加载中',
					mask: true
				});
				this.$api.orderWxCreate(req).then(res => {
					if (res.code == 200) {
						this.$api.orderWxPay({
							orderNo: res.data.orderNo,
							payType: res.data.payType == 20 ? 'WECHAT' : 'WALLET'
						}).then(twoItem => {

							let {
								result
							} = twoItem.data
							if (twoItem.data.payType == 'WECHAT') {
								// 微信支付
								if (twoItem.data.needPay) {
									uni.showLoading({
										title: '加载中',
										mask: true
									})
									uni.requestPayment({
										nonceStr: result.nonceStr,
										package: result.packageValue,
										paySign: result.paySign,
										timeStamp: result.timeStamp,
										signType: result.signType,
										success: threeRes => {
											that.orderWxPayQuery(res.data.orderNo);
										},
										fail: threeRes => {
											that.orderWxPayQuery(res.data.orderNo);
										}
									});


								} else {
									that.orderWxPayQuery(res.data.orderNo);
								};
							} else {
								// 余额支付
								if (twoItem.data.needPay) {


									that.orderWxPayQuery(res.data.orderNo);

								} else {
									that.orderWxPayQuery(res.data.orderNo);
								};
							}
						})
					}
				})
			},
			// 查询支付状态
			orderWxPayQuery(orderNo) {
				this.$api.orderWxPayQuery({
					orderNo
				}).then(res => {
					if (res.code === 200) {
						uni.hideLoading()
						uni.showToast({
							icon: 'none',
							title: res.data.isPay ? '支付成功' : '支付失败',
							mask: true
						})


						if (res.data.isPay) {
							uni.redirectTo({
								url: `/package/succeed/index?orderNo=${orderNo}`
							})
						} else {
							setTimeout(() => {
								uni.redirectTo({
									url: `/package/orderAmount/index?orderNo=${orderNo}`
								})
							}, 1000)
						}
					};
				});
			},
			initAffirm() {
				let req = JSON.parse(JSON.stringify(this.sendObj));
				req.partnerNo = uni.getStorageSync('partnerNo')

				uni.showLoading({
					title: '加载中',
					mask: true
				});
				this.$api.orderWxConfirm(req).then(res => {
					// console.log('res--->',res)
					if (res.code == 200) {
						this.particulars = res.data
						this.partOrderProductList = [];
						this.particulars.orderProductList.forEach(item => {
							if (item.productType == 20) {
								this.partOrderProductList.push(item)
							}
						})
						console.log(this.particulars)
					}
				})
			},
			goPath(url) {
				uni.setStorageSync('isProfile', false);
				uni.navigateTo({
					url
				})
			},
			goBack() {
				uni.navigateBack()
			},
			tagerPaymentIndex(index) {
				this.paymentIndex = index;
			},
			mallCartWxNum(cartId, goodsNum, type, index) {
				let nowGoodsNum = goodsNum;
				if (type == 'jdd') {
					nowGoodsNum = goodsNum - 1 <= 0 ? 0 : goodsNum - 1;
					if (nowGoodsNum == 0) {
						let isRemoveList = [];
						this.isShow = true;
						this.isRemoveList.push(cartId)
						return
					}
				} else if (type == 'add') {
					nowGoodsNum = goodsNum + 1;
				} else if (type == 'num') {
					nowGoodsNum = goodsNum;
				}

				uni.showLoading({
					title: '加载中',
					mask: true
				});
				this.$api.mallCartWxNum({
					cartId,
					goodsNum: nowGoodsNum
				}).then(res => {
					if (res.code == 200) {
						console.log('res---->', res)
						this.cartList = res.data.cartList;
						this.totalPrice = res.data.totalPrice
					} else if (res.code == 503) {
						if (res.msg == '购买数量不能小于0') {
							uni.hideToast()
							let isRemoveList = [];
							this.isShow = true;
							this.isRemoveList.push(cartId)
							return
						}
					}

				})

			},

		}
	}
</script>

<style scoped lang="scss">
	.myPages {
		min-height: 100vh;
		background-color: #F7F8FC;

		box-sizing: border-box;

		.saleBox {
			bottom: 0;
			margin: 32rpx;
			margin-bottom: 48rpx;
			width: 686rpx;
			background-color: #FFFFFF;
			border-radius: 40rpx;
			padding: 32rpx;
			box-sizing: border-box;
			position: absolute;
			bottom: 0;

		}


		.saleBox__HeardImg {
			width: 48rpx;
			height: 48rpx;
			position: absolute;
			top: 32rpx;
			right: 32rpx;
		}

		.serviceIphoneImg {
			width: 58rpx;
			height: 58rpx;
		}

		.serviceIphone {
			font-size: 28rpx;
			font-family: 'DIN';
			font-weight: normal;
			color: #2B2B33;
		}



		.saleBox__MainItem {
			height: 104rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			line-height: 104rpx;
			background: #f7f8fc;
			opacity: 1;
			border-radius: 40rpx;
			font-size: 28rpx;
			font-family: 'DIN';
			font-weight: normal;
			color: #2B2B33;
			margin-top: 24rpx;

			span:nth-child(2) {
				font-size: 22rpx;
				font-family: 'DIN';
				color: #7b7d8d;
			}

		}

		.saleBox__MainItem--service {
			justify-content: space-between !important;
			padding: 0 32rpx;
			box-sizing: border-box;
		}

		.saleBox__MainItem--wthid {
			background: #dedfe3;
			color: #FFFFFF;
		}

		.saleBox__MainItem--red {
			background: #f44b5b;
			color: #FFFFFF;
			box-shadow: 0 28rpx 22rpx -26rpx #F44B5B;
			
		}

		.saleBox__MainTextarea {
			display: flex;
			width: 60rpx;
			height: 36rpx;
			font-size: 26rpx;
			font-family: 蘋方-簡;
			font-weight: normal;
			line-height: 36rpx;
			color: #2B2B33;
			position: absolute;
			right: 80rpx;
			bottom: 185rpx;
			span:nth-child(1) {
				color: #babbbd;
			}
		}

		.saleBox__Heard {
			width: 100%;
			height: 48rpx;
			font-size: 28rpx;
			font-family: 'DIN';
			font-weight: normal;
			line-height: 48rpx;
			color: #2B2B33;
			text-align: center;

		}

		.saleBox__MainText {
			width: 100%;
			border-radius: 40rpx;
			font-size: 28rpx;
			margin-top: 24rpx;
			background-color: #f7f8fc;
			padding: 32rpx;
			box-sizing: border-box;
		}

		.myPages__remarkButtom {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			padding: 0 32rpx;
			padding-bottom: 48rpx;
			box-sizing: border-box;
			background-color: #F7F8FC;
			z-index: 9;
		}

		.myPages__remarkBoxs {
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			background: #F44B5B;
			opacity: 1;
			border-radius: 40rpx;
			font-size: 28rpx;
			font-family: 'DIN';
			font-weight: normal;
			color: #FFFFFF;
			box-shadow: 0 28rpx 22rpx -26rpx #F44B5B;
		}

		.overlayBox {
			width: 202rpx;
			height: 90rpx;
			background: rgba(0, 0, 0, 0.9);
			border-radius: 32px;
			display: flex;
			align-items: center;
			justify-content: center;
			position: fixed;
			top: 48%;
			left: 50%;
			transform: translate(-50%, -50%);

			image {
				display: inline-block;
				width: 34rpx;
				height: 34rpx;
			}

			span {
				display: inline-block;
				height: 34rpx;
				font-size: 24rpx;
				font-family: 蘋方-簡;
				font-weight: normal;
				line-height: 34rpx;
				color: #FFFFFF;
				margin-left: 8rpx;

			}
		}

		.myPages__paymentBox {
			padding: 32rpx;
			background-color: #FFFFFF;
			border-radius: 40rpx;
			margin: 20rpx 0;

		}

		.myPages__paymentBoxItem {
			height: 48rpx;
			line-height: 48rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10rpx 0;
		}

		.myPages__paymentLeftText {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			font-size: 28rpx;
			font-family: 'DIN';
			font-weight: normal;
			color: #2B2B33;
			display: inline-block;

			span {
				margin-left: 10rpx;
			}

			span:nth-child(2) {
				font-size: 24rpx;
				font-family: 'DIN';
				font-weight: normal;
				color: #7B7D8D;
				margin-left: 2rpx;
			}
		}

		.myPages__paymentLeftIcon {
			height: 48rpx;
			width: 48rpx;

		}

		.myPages__paymentLeft {
			flex: 1;
			display: flex;
		}

		.myPages__paymentLRight {
			height: 44rpx;
			width: 44rpx;
			flex: 0 0 44rpx;
		}

		.myPages__remarkLeftIcon {
			height: 48rpx;
			width: 48rpx;
		}

		.myPages__remarkRightIcon {
			height: 40rpx;
			width: 40rpx;
			flex: 0 0 40rpx;
		}

		.myPages__remarkLeft {
			span {
				display: inline-block;
				font-size: 28rpx;
				font-family: 'DIN';
				font-weight: normal;
				color: #2B2B33;
			}

			display: flex;
			align-items: center;
			flex: 0 0 175rpx;
		}

		.myPages__remarkRight {
			span {
				font-size: 28rpx;
				font-family: 'DIN';
				font-weight: normal;
				color: #7B7D8D;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			display: flex;
			align-items: center;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		.myPages__remarkBox {
			height: 100rpx;
			background: #FFFFFF;
			box-shadow: 0px 0px 40rpx rgba(228, 228, 245, 0.4);
			opacity: 1;
			border-radius: 40rpx;
			display: flex;
			justify-content: space-between;
			padding: 0 32rpx;
			align-items: center;
		}

		.myPages__main {
			padding: 0 32rpx;
			padding-top: 10rpx;
			box-sizing: border-box;
			padding-bottom: 140rpx;
		}

		.myPages__logistics {
			position: relative;
			width: 686rpx;
			height: 168rpx;
			background: #FFFFFF;
			opacity: 1;
			border-radius: 40rpx;
			padding: 20rpx 32rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;

			overflow: hidden;

			&::after {
				content: '';
				bottom: 0;
				left: 0;
				position: absolute;
				width: 100%;
				height: 4rpx;
				background-image: repeating-linear-gradient(125deg, #C2DCFF 0, #C2DCFF 20rpx, #F0414D 20rpx, #F0414D 40rpx);
			}
		}

		.myPages__logisticsImg {
			width: 72rpx;
			height: 104rpx;
			flex: 0 0 72rpx;
		}

		.myPages__logisticsMain {
			flex: 1;
			display: flex;
			flex-direction: column;
			margin: 0 32rpx;
			width: 416rpx;

		}

		.myPages__logisticsMainTopView {
			display: flex;
			align-items: center;

		}

		.myPages__logisticsMainTop {
			height: 44rpx;
			font-size: 32rpx;
			font-family: 'DIN';
			font-weight: normal;
			line-height: 44rpx;
			color: #2B2B33;
			opacity: 1;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap
		}

		.myPages__logisticsMainBottom {
			span {
				display: inline-block;
				height: 34rpx;
				font-size: 24rpx;
				font-family: 'DIN';
				font-weight: normal;
				line-height: 34rpx;
				color: #7B7D8D;
				opacity: 1;
			}

			span:nth-child(2) {
				margin-left: 24rpx;
			}
		}

		.myPages__logisticsMainEnd {
			width: 56rpx;
			height: 56rpx;
		}

		.myHandbag__mainItemCenBoxJjieMains {
			display: flex;
			border-radius: 32rpx;
			flex: 0 0 160rpx;
			width: 160rpx;
			text-align: center;
			height: 100%;
			align-items: flex-end;
			box-sizing: border-box;
			padding-bottom: 2rpx;

			.nowinput {
				display: inline-block;
				height: 56rpx !important;
				font-size: 30rpx !important;
				font-family: 'DIN';
				font-weight: normal;
				line-height: 56rpx !important;
				padding: 0 12rpx;
				color: #2B2B33 !important;
				width: 45rpx;
				text-align: center;
			}
		}

		.myHandbag__mainItemCenBoxJjieMainNum {
			font-size: 24rpx;
			font-family: 'DIN';
			font-weight: normal;
			color: #7B7D8D;
			opacity: 1;
			text-align: center;
			width: 100%;

			span {
				font-size: 32rpx;
				font-family: 'DIN';
				font-weight: normal;
				color: #7B7D8D;
				opacity: 1;
			}
		}

		.myHandbag__mainItemCenBoxJjieMain {
			height: 56rpx;
			display: flex;
			border-radius: 32rpx;
			background-color: #F7F8FC;

			.nowinput {
				display: inline-block;
				height: 56rpx !important;
				font-size: 30rpx !important;
				font-family: 'DIN';
				font-weight: normal;
				line-height: 56rpx !important;
				padding: 0 12rpx;
				color: #2B2B33 !important;
				width: 45rpx;
				text-align: center;
			}
		}

		.myHandbag__mainItemCenBoxJjieMainImg01 {
			width: 56rpx;
			height: 56rpx;
		}

		.myHandbag__mainItemCenBoxJjieMainImg02 {
			width: 56rpx;
			height: 56rpx;
		}

		.myPages__mainFormHaerdLeftImg {
			width: 94rpx;
			height: 36rpx;
			margin-right: 10rpx;
		}

		.myPages__mainFormHaerdRightImg {
			width: 40rpx;
			height: 40rpx;
		}

		.myPages__mainFormMainItemBodyTopImgs {
			width: 136rpx;
			height: 136rpx;
		}

		.mymyPages__mainFormMainItemBodyTopImgs {
			transform: scale(1.5);
		}

		.myPages__mymainFormMainItemBodyTopImgs {
			width: 92rpx;
			height: 92rpx;
		}

		.myPages__mainFormMainItemBodyTopImg {
			width: 92rpx;
			height: 92rpx;
		}

		.myPages__mainFormMainItemBodyTopImgBoxs {
			width: 112rpx;
			height: 112rpx;
			border-radius: 24rpx;
			overflow: hidden;
			background-color: #f7f8fc;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.myPages__mainForm {
			width: 686rpx;
			padding: 20rpx 32rpx;
			box-sizing: border-box;
			border-radius: 40rpx;
			background-color: #FFFFFF;
			margin: 20rpx 0;
		}

		.myPages__mainFormHaerd {
			display: flex;
			justify-content: space-between;
			height: 40rpx;
			align-items: center;

			span {
				height: 34rpx;
				font-size: 24rpx;
				font-family: 'DIN';
				font-weight: normal;
				line-height: 34rpx;
				color: #B0B1BB;
				opacity: 1;
			}

		}

		.myPages__mainFormHaerdLeft {
			display: flex;
			height: 40rpx;
			align-items: center;
		}

		.myPages__mainFormMain {
			padding-top: 20rpx;
		}

		.myPages__mainFormMainButtom {
			display: flex;
			justify-content: flex-end;
			align-items: flex-end;
		}

		.myPages__mainFormMainButtomText {
			height: 34rpx;
			font-size: 24rpx;
			font-family: 'DIN';
			font-weight: normal;
			line-height: 34rpx;
			color: #B0B1BB;
			opacity: 1;
			margin-right: 10rpx;
		}

		.myPages__mainFormMainButtomBox {
			span {
				display: inline-block;
				font-family: 'DIN';
				font-weight: normal;
				color: #F0414D;
				font-size: 32rpx;
			}

			span:nth-child(1) {
				font-size: 24rpx;
			}
		}


		.myPages__mainFormMainItem {
			width: 100%;
			background-color: #F0F2F8;
			border-radius: 24rpx;
			overflow: hidden;
			margin-bottom: 24rpx;

		}

		.myPages__mainFormMainItemName {
			height: 50rpx;
			font-size: 24rpx;
			font-family: 'DIN';
			font-weight: normal;
			line-height: 50rpx;
			color: #7B7D8D;
			opacity: 1;
			padding: 0 24rpx;
		}

		.myPages__mainFormMainItemBody {
			background: #FFFFFF;
			border: 2rpx solid #F0F2F8;
			opacity: 1;
			border-radius: 24rpx;
			padding: 24rpx;
			box-sizing: border-box;
		}

		.myPages__mainFormMainItemBodyTop {
			display: flex;
			justify-content: space-between;
		}

		.myPages__mymainFormMainItemBodyTop {
			margin-bottom: 16rpx;
		}

		.myPages__mainFormMainItemBodyTop:last-child {
			margin-bottom: 0;
		}

		.myPages__mainFormMainItemBodyTopImgBox {
			width: 136rpx;
			flex: 0 0 136rpx;
			height: 136rpx;
			border-radius: 24rpx;
			overflow: hidden;
			background-color: #f9f8fd;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.myPages__mainFormMainItemBodyBottomx {
			margin-left: 20rpx;
			display: flex;
			flex-direction: column;
			flex: 1;
			justify-content: space-around;

			p {
				font-size: 24rpx;
				font-family: 'DIN';
				font-weight: normal;
				color: #7B7D8D;
				opacity: 1;
			}

			span {
				display: flex;
				height: 44rpx;
				font-size: 32rpx;
				font-family: 'DIN';
				font-weight: normal;
				line-height: 44rpx;
				color: #2B2B33;
			}
		}

		.myHandbag__mainItemCenBoxJjieMainNuxsm {
			flex: 0 0 26rpx;
			width: 26rpx;
			height: 34rpx;
			font-size: 24rpx;
			font-family: 蘋方-簡;
			font-weight: normal;
			line-height: 34rpx;
			color: #B0B1BB;
			transform: translateY(8rpx);
		}

		.myPages__mainFormMainItemBodyBottom {
			display: flex;
			align-items: baseline;
			justify-content: space-between;
			margin-top: 24rpx;
		}

		.myPages__mainFormMainItemBodyBottomImgBox {
			flex: 1;
			margin-right: 34rpx;
			display: flex;
			justify-content: space-between;
		}



	}
</style>
